<template>
  <div class="script-wrapper">
    <div class="script-header">
      <div class="xuhao w10">序号</div>
      <div class="jingtou w10">镜头</div>
      <div class="shichang w10">时长(S)</div>
      <div class="jingbie w10">景别</div>
      <div class="huamian w20">画面描述</div>
      <div class="pangbai w20">旁白</div>
      <div class="yinyue w10">音乐、音效</div>
      <div class="didian w10">地点</div>
      <div class="didian w10">操作</div>
    </div>
    <div class="script-item" v-for="(item,index) in from.scripts" :key="index">
      <div class="w10 flex-row-center">{{ index + 1 }}</div>
      <div class="w10">
        <textarea v-model="item.jingtou" @input="textaearInput"></textarea>
      </div>
      <div class="w10">
        <textarea v-model="item.shichang" @input="textaearInput"></textarea>
      </div>
      <div class="w10">
        <textarea v-model="item.jingbie" @input="textaearInput"></textarea>
      </div>
      <div class="w20">
        <textarea v-model="item.fenjingtu" @input="textaearInput"></textarea>
      </div>
      <div class="w20">
        <textarea v-model="item.pangbai" @input="textaearInput"></textarea>
      </div>
      <div class="w10">
        <textarea v-model="item.yinxiao" @input="textaearInput"></textarea>
      </div>
      <div class="w10">
        <textarea v-model="item.didian" @input="textaearInput"></textarea>
      </div>
      <div class="w10">
        <div class="oper-btn delete flex-row-center" @click="deleteScript(item.id)">删除</div>
      </div>
    </div>
    <!-- 操作面板：导入脚本、导出脚本（JSON格式、Word格式（待定功能，优先支持JSON格式）） -->
    <div class="oper">
      <h3>功能列表</h3>
      <div class="oper-btn export flex-row-center" @click="exportHandler">导出</div>
      <div class="oper-btn import flex-row-center" @click="importHandler">导入</div>
      <div class="oper-btn add flex-row-center" @click="addScript">添加步骤</div>
      <div class="oper-btn scrolltop flex-row-center" @click="scrollTop">滚动至顶部</div>
    </div>
  </div>
</template>
  
<script setup>
import { reactive, onMounted } from "vue";
import JsonFormat from './jsonFormat.js';
const jsonFormat = new JsonFormat();

const template = {
  id: 1,
  jingtou: "",
  shichang: "",
  jingbie: "",
  fenjingtu: "",
  pangbai: "",
  yinxiao: "",
  didian: "",
};
let from = reactive({
  scripts: [template],
});
const oSpan = document.createElement("p");
onMounted(() => {
  oSpan.style.position = "fixed";
  oSpan.style.top = "-100px";
  document.body.appendChild(oSpan);

  window.addEventListener(
    "beforeunload",
    (event) => {
      event.returnValue = "真的要关闭此窗口吗?";
    },
    false
  );
  window.addEventListener(
    "unload",
    () => {
      console.log("刷新了2");
      return "确定刷新?";
    },
    false
  );
});
// 添加一条脚本
const addScript = () => {
  let prevId = from.scripts[from.scripts.length - 1].id;
  from.scripts.push({
    id: ++prevId,
    jingtou: "",
    shichang: "",
    jingbie: "",
    fenjingtu: "",
    pangbai: "",
    yinxiao: "",
    didian: "",
  });
  scorllEnd();
};

// 始终滚动至底部
const scorllEnd = () => {
  const scriptWrapper = document.getElementsByClassName("script-wrapper")[0];
  const scriptWrapperParentNode =
    scriptWrapper.parentNode;
  setTimeout(() => {
    scriptWrapperParentNode.scrollTop = scriptWrapperParentNode.scrollHeight;
  }, 0);
};

// 滚动至顶部
const scrollTop = () => {
  const scriptWrapper = document.getElementsByClassName("script-wrapper")[0];
  const scriptWrapperParentNode =
    scriptWrapper.parentNode;
  scriptWrapperParentNode.scrollTop = 0;
};

// 文本域输入自动高度
const textaearInput = (e) => {
  const ev = e;
  const tar = ev.target;
  const val = tar.value;
  const tarWidth = tar.scrollWidth;
  oSpan.innerHTML = val;
  // 计算textarea的高度 需要创建一个标签 
  // 将输入的字符串赋值出去，获取新建标签的宽度，
  // 在获取当前textarea的宽度，相除后得到一个
  // 行数，设置textarea和新建标签的行高后，就可
  // 以大概知道textarea的高度了
  if (oSpan.clientWidth > tarWidth) {
    const res = Math.floor(oSpan.clientWidth / tarWidth);
    tar.style.height = `${res * 20 + 30}px`;
  }
  // 如果没有数据，设置当前textarea的高度为默认高度
  if (!val) {
    tar.style.height = `50px`;
  }
};

// 删除一个片段
const deleteScript = (id) => {
  if (from.scripts.length > 1) {
    const res = from.scripts.filter((item) => {
      return item.id != id;
    });
    from.scripts = res;
  }
};

// 导出脚本
const exportHandler = () => {
  // 导出的数据  原样导出  不做校验
  let json = jsonFormat.prettyFormat(JSON.stringify(from.scripts));
  const blob = new Blob([json], { type: "text/json" });
  const downloadLink = document.createElement("a");
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = `${new Date().getTime()}视频脚本.json`;
  // 触发下载
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};

// 导入脚本
const importHandler = () => {
  // 先清空现有的
  from.scripts = reactive([template]);
  // 创建文件选择的input标签
  const oInput = document.createElement('input');
  oInput.setAttribute('type', 'file');
  oInput.click();
  oInput.addEventListener('input', () => {
    const scriptFile = oInput.files[0]
    const fr = new FileReader();
    fr.onload = (e) => {
      const res = JSON.parse(e.target.result);
      from.scripts = reactive(res);
    }
    fr.readAsText(scriptFile);
  }, false)
}
</script>
  
<style scoped>
.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

* {
  font-family: "Courier New", Courier, monospace;
}
.script-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  box-sizing: border-box;
}

.script-header {
  position: sticky;
  top: 0;
  width: 80%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #cccccc;
  user-select: none;
  font-weight: bold;
  background-color: #ffffff;
}

.oper {
  position: fixed;
  right: 20px;
  width: 15%;
  background-color: #000000;
  color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}

.oper-btn {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  color: #000000;
  margin: 10px auto;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.oper-btn:hover {
  background-color: #cfc7c7 !important;
  color: #ffffff !important;
}

.script-header > div {
  border-right: 1px solid #cccccc;
  text-align: center;
}

.script-header > div:last-child {
  border: none;
}

.script-item {
  display: flex;
  width: 80%;
  height: auto;
  min-height: 50px;
  border: 1px solid #cccccc;
  border-top: none;
}

.script-item > div {
  min-height: 50px;
  height: auto;
  border-right: 1px solid #cccccc;
  overflow: hidden;
}

::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0.5);
  width: 5px;
}

::-webkit-scrollbar-thumb {
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  cursor: pointer;
}

.script-item > div > textarea {
  width: 100%;
  height: 100px;
  line-height: 20px;
  outline: none;
  border: none;
  box-sizing: border-box;
  resize: none;
  word-break: break-all;
}
.script-item > div:last-child {
  border: none;
}

.w10 {
  width: 10%;
}
.w20 {
  width: 20%;
}

.w30 {
  width: 30%;
}

.w50px {
  width: 50px;
}
</style>